<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的简历</title>
<!--<script src="js.js" type="text/javascript"></script>-->
<!--	<link href="css.css" rel="stylesheet" type="text/css"/>-->
<style id = "css">
/*<!-- 此处内容由js控制 -->*/
/* CSS Document */
/* 
* Inspired by http://strml.net/
* 大家好，我是刘金发
* 最近发现了一些有趣的东西，想要做一份特别的简历 
*
*/

/* 首先给所有元素加上过渡效果 */
* {
	transition: all .3s;
}
/* 白色背景太单调了，我们来点背景 */
html {
	color: rgb(222,222,222);
	background: rgb(0,43,54);
}
/* 文字离边框太近了 */
.styleEditor {
	padding: .5em;
	border: 1px solid;
	margin: .5em;
	overflow: auto;
	width: 45vw;
	height: 90vh;
}
/* 代码高亮 */
.token.selector {
	color: rgb(133,153,0);
}
.token.property {
	color: rgb(187,137,0);
}
.token.punctuation {
	color: yellow;
}
.token.function {
	color: rgb(42,161,152);
}
/* 加点 3D 效果呗 */
html {
	perspective: 1000px;
}
.styleEditor {
	position: fixed;
	left: 0;
	top: 0;
	-webkit-transition: none;
	transition: none;
	-webkit-transform: rotateY(10deg) translateZ(-100px);
	transform: rotateY(10deg) translateZ(-100px);
}
/* 接下来我给自己准备一个编辑器 */
.resumeEditor {
	position: fixed;
	right: 0;
	top: 0;
	padding: .5em;
	margin: .5em;
	width: 48vw;
	/*	min-width: 18vw;*/
/*	height: 90vh;*/
	min-height: 10vh;
	border: 1px solid;
	background: white;
	color: #222;
	overflow: auto;
}
/* 好了，我开始写简历了 */


/**/
/* 这个简历好像差点什么
 * 对了，这是 文本 格式的，我需要变成对 HR 更友好的格式
 * 简单，给它加些标签变成 HTML 就行了
 */


/**/
/* 再对 HTML 加点样式 */
/*感觉编辑器高度太低了，加高点吧*/
	
.resumeEditor {
	height: 90vh;
	padding: 1em;
}
.resumeEditor h2 {
	display: inline;
	border-bottom: 1px solid;/*		margin: 1em 0 .5em;*/
}
.resumeEditor ul, .resumeEditor ol {
	list-style: none;
}
.resumeEditor ul>li:before {
	content: '•';
	margin-right: .5em;
}
.resumeEditor ol {
	counter-reset: section;
}
.resumeEditor ol li:before {
	counter-increment: section;
	content: counters(section, ".");
	margin-right: .5em;
}
.resumeEditor blockquote:before {
	content: '> '
}
.resumeEditor blockquote {
	margin: 1em;
	padding: .5em;
	background: #ddd;
}
html {
	min-height: 100vh;
}
* {
	box-sizing: border-box;
}
</style>
</head>

<body>
<pre id="content" class="styleEditor">
		<!-- 此处内容由js控制 -->
		/* CSS Document */
/* 
* Inspired by http://strml.net/
* 大家好，我是刘金发
* 最近发现了一些有趣的东西，想要做一份特别的简历 
*
*/

/* 首先给所有元素加上过渡效果 */
* {
  transition: all .3s;
}
/* 白色背景太单调了，我们来点背景 */
html {
  color: rgb(222,222,222); background: rgb(0,43,54);
}
/* 文字离边框太近了 */
.styleEditor {
  padding: .5em;
  border: 1px solid;
  margin: .5em;
  overflow: auto;
  width: 45vw; height: 90vh;
}
/* 代码高亮 */
.token.selector{ color: rgb(133,153,0); }
.token.property{ color: rgb(187,137,0); }
.token.punctuation{ color: yellow; }
.token.function{ color: rgb(42,161,152); }

/* 加点 3D 效果呗 */
html{
  perspective: 1000px;
}
.styleEditor {
  position: fixed; left: 0; top: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: rotateY(10deg) translateZ(-100px) ;
          transform: rotateY(10deg) translateZ(-100px) ;
}

/* 接下来我给自己准备一个编辑器 */
.resumeEditor{
	position: fixed; right: 0; top: 0;
	padding: .5em;  margin: .5em;
	width: 48vw;
/*	min-width: 18vw;*/
/*	height: 90vh;*/
	min-height: 10vh;
	border: 1px solid;
	background: white; color: #222;
	overflow: auto;
}
/* 好了，我开始写简历了 */


/**/
/* 这个简历好像差点什么
 * 对了，这是 文本 格式的，我需要变成对 HR 更友好的格式
 * 简单，给它加些标签变成 HTML 就行了
 */


/**/
/* 再对 HTML 加点样式 */
/*感觉编辑器高度太低了，加高点吧*/
.resumeEditor{
	height: 90vh;
  	padding: 2em;
}
.resumeEditor h2{
  display: inline-block;
  border-bottom: 1px solid;
  margin: 1em 0 .5em;
}
.resumeEditor ul,.resumeEditor ol{
  list-style: none;
}
.resumeEditor ul> li::before{
  content: '•';
  margin-right: .5em;
}
.resumeEditor ol {
  counter-reset: section;
}
.resumeEditor ol li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-right: .5em;
}
.resumeEditor blockquote {
  margin: 1em;
  padding: .5em;
  background: #ddd;
}		
html {
	min-height: 100vh;
}
*{
	box-sizing: border-box;
}
	</pre>
<div class = "resumeEditor">
  <h2>刘金发</h2>
  <ul>
    <li>有着良好的Java基础，会js/html/css的web技术，热爱互联网技术。</li>
    <li>目标是成为JavaWeb全栈开发工程师！</li>
  </ul>
  <h2>技能</h2>
  <ul>
    <li>前端开发</li>
    <li>Node.js开发</li>
    <li>Java后端开发</li>
    <li>python脚本开发</li>
  </ul>
  <h2>教育背景</h2>
  <ol>
    <li>高中 南雄市第一中学</li>
    <li>大学 韶关学院 计算机应用技术</li>
  </ol>
  <h2>链接</h2>
  <ul>
    <li>[Github]()</li>
    <li><a href="myweixin.html">[我的微信]</a></li>
    <li><a href="../start.html">[返回菜单]</a></li>
  </ul>
  <blockquote>如果你喜欢这个效果，点击<a href="resume.html">[动态简历]</a>，来查看吧！ </blockquote>
  <!--<iframe src="resumeEditor.html" frameborder="0" marginwidth="0" marginheight="0" width="109%" height="101%" scrolling="auto"></iframe>--> 
  <!--<object type="text/html" data="resumeEditor.html" width="100%" height="100%"></object>--> 
</div>
<!--<input type="button" value="读取" onclick="dotxt();"/>--> 
<!--<pre id="vv">fdfdsfsfss</pre>-->
</body>
</html>